<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>计算属性和侦听器</title>
</head>
<body>
    <div id="app">
        <!-- 计算属性 -->
        <p>这是正常消息:"{{message}}"</p>
        <p>这是反转消息:"{{reversedMessage }}"</p>
        <!-- 方法 -->
        <p>方法反转:"{{reversedMessag()}}"</p>
        <!-- 侦听属性 -->
        <p>{{fullName}}</p>
        <!-- 计算属性的setter -->
        <p></p>
    </div>



    <script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello",
            firstName: 'Foo',
            lastName: 'Bar',
           
        },
        computed:{
            //计算属性
            reversedMessage(){
                //this指向vm实例
                return this.message.split('').reverse().join('')
            },
            fullName:{
                //getter
                get:function(){
                    return this.firstName + ' ' + this.lastName
                },
                //setter
                set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
    }
            }

        },
        //方法
        methods:{
            reversedMessag(){
                return this.message.split('').reverse().join('')
            }

        },
        //侦听属性
        watch:{
            firstName:function(val){
                this.fullName = val + ' ' + this.lastName
            }

        }
    })

    </script>
    
</body>
</html>